<div class="demo-container">
    <div class="demo-example">
        <div class="demo-title">基本用法</div>
        <div class="demo-text">
            传入菜单，监听一级菜单的开合(menuToggle)或二级菜单的点击(itemClick)。<br/>
            一级菜单默认展开使用属性open，二级菜单默认激活使用属性active，禁用项使用disabled。<br/>
            通过restrictOneOpen设置是否限制只能展开一个一级菜单。
        </div>
        <d-codebox id="accordion-demo-basic" [sourceData]="AccordionDemoBasic">
            <d-accordion-demo-basic demo></d-accordion-demo-basic>
        </d-codebox>
    </div>
    <div class="demo-example">
        <div class="demo-title">使用内置路由和链接类型</div>
        <div class="demo-text">
            通过设置linkType切换不同的内置路由和链接类型：默认类型''； 路由类型'routerLink'；外链类型：'hrefLink'；基于数据判断路由或链接类型：'dependOnLinkTypeKey'。
        </div>
        <d-codebox id="accordion-demo-link" [sourceData]="AccordionDemolink">
            <d-accordion-demo-link demo></d-accordion-demo-link>
        </d-codebox>
    </div>
    <div class="demo-example">
        <div class="demo-title">使用模板</div>
        <div class="demo-text">
            一级菜单和二级菜单分别使用模板。一级菜单指定menuItemTemplate，二级菜单指定itemTemplate。<br/>
            没有数据模板指定noContentTemplate，并可以通过showNoContent控制无数据的时候不展开。<br/>
            加载中模板指定loadingTemplate，通过item的loadingKey对应的属性值控制是否显示加载中。<br/>
        </div>
        <d-codebox id="accordion-demo-template" [sourceData]="AccordionDemoTemplate">
            <d-accordion-demo-template demo></d-accordion-demo-template>
        </d-codebox>
        <div class="demo-text">
            内部列表通过制定innerListTemplate使用模板
        </div>
        <d-codebox  d="accordion-demo-inner-list-template" [sourceData]="AccordionDemoInnerListTemplate">
            <d-accordion-demo-inner-list-template demo></d-accordion-demo-inner-list-template>
        </d-codebox>
    </div>
</div>
